<template>
  <div class="sea-image-picker">
    <div v-show="imageBase64" class="sea-image-picker-item" style="padding: 6px;">
      <img :src="imageBase64" alt="Image preview" style="width: 84px;height: 84px;display: block;"/>
      <div class="sea-image-picker-remove" title="删除"><i class="fa fa-times-circle-o"></i>
      </div>
    </div>
    <div class="sea-image-picker-item" v-show="canUpload">
      <div @click="$refs.input.click()">
        <el-row class="sea-image-picker-button" v-loading="loading">
          <i class="el-icon-plus"></i>
        </el-row>
        <input type="file" ref="input" style="display: none" @change="convertToBase64">
      </div>
    </div>
  </div>
</template>

<script>
import Layers from "@/lang/layers";

export default {
    data() {
        return {
            // 图片
            imageBase64: null,
            // 是否处于加载
            loading: false
        };
    }, computed: {
        canUpload: function () {
            return Layers.isBlank(this.imageBase64);
        }
    }, methods: {
        convertToBase64(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = (e) => {
                    this.imageBase64 = e.target.result;
                };
                reader.readAsDataURL(file);
            }
        },
    },
};
</script>

<style scoped>

</style>